<template>
	<view>
		<view class="person_body" v-if="userList.length">
			<view class="person_cell person_titleBox">
				<view class="person_box person_img">
					人员
				</view>
				<view class="person_box person_num">
					业绩
				</view>
				<view class="person_box person_name">
					提成
				</view>
				<view class="person_box person_level">
					提成比例
				</view>
			</view>
			
			<view class="person_cell" v-for="(item,index) in userList" :key="index">
				<view class="person_box person_img">
					<image :src="item.HeadImgUrl" mode="aspectFill"></image>
					<view class="person_text" style="margin: 4rpx 0;">
						{{item.Name}}
					</view>
					<view class="person_text">
						{{item.UserType}}
					</view>
				</view>
				<view class="person_box person_num">
					{{item.Performance}}
				</view>
				<view class="person_box person_name">
					{{item.Bonus}}
				</view>
				<view class="person_box person_level">
					{{item.BonusRatio}}
				</view>
			</view>
		</view>
		<EmptyBox v-else text="暂无数据"></EmptyBox>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				SaleMonth:'',
				userList:[]
			};
		},
		onLoad(e){
			console.log(e);
			this.SaleMonth = e.SaleMonth
			console.log(this.SaleMonth);
			uni.setNavigationBarTitle({
				title:this.SaleMonth+'业绩明细'
			})
			this.SalePerformanceItem()
		},
		methods:{
			async	SalePerformanceItem(){
				let res = await this.$api.post('/SaleChannel/SalePerformanceItem',{
					SaleMonth:this.SaleMonth
				})
				if(res.code==0){
					this.userList = res.data || []
				}else{
					this.$pv.msg(res.message)
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f6f6f6;
}
.person_body{
		margin: 24rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		.person_cell{
			display: flex;
			align-items: center;
			padding: 0 12rpx;
			border-bottom: 2rpx solid #eee;
			.person_box{
				width: 25%;
				min-width: 25%;
				max-width: 25%;
				// height: 100rpx;
				padding: 12rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				word-break: break-all;
				text-align: center;
				font-size: 26rpx;
			}
			.person_img{
				// width: 20%;
				// min-width: 20%;
				// max-width: 20%;
				flex-direction: column;
				image{
					width: 78rpx;
					height: 78rpx;
					border-radius: 8rpx;
				}
			}
			.person_text{
				font-size: 24rpx;
			}
			// .person_num{
			// 	width: 35%;
			// 	min-width: 35%;
			// 	max-width: 35%;
			// }
		}
		.person_second{
			position: relative;
			background-color: #e2e2e2;
			.icons{
				position: absolute;
				top: 0;
				left: 14rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				// width: 20rpx;
				image{
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
		.person_titleBox{
			.person_box{
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}
</style>
